<template>
  <div class="member-order">
    <!-- tab组件 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name">
        <!-- 直接写渲染组件，直接使用eleUI库，不过这样会渲染7个子组件 -->
        <div class="order-list">
          <div v-if="loading" class="loading"></div>
          <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
          <!-- orderList 订单数据渲染 -->
          <OrderItem @on-cancel="handlerCancel" @on-delete="handlerDelete" @on-confirm="handlerConfirm" @on-logistics="handlerLogistics" v-for="item in orderList" :key="item.id" :order="item" />
          <!-- {{ item.name }} -->
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页组件 -->
    <XtxPagination v-if="total > 0" :current-page="reqParams.page" :page-size="reqParams.pageSize" :total="total" @current-change="reqParams.page = $event" />
    <!-- 取消原因组件 -->
    <OrderCancel ref="orderCancelCom" />
    <!-- 查看物流组件 -->
    <OrderLogistics ref="orderLogisticsCom" />
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import { ElMessageBox, ElMessage } from 'element-plus'
import { findOrderList, deleteOrder, confirmOrder } from '@/api/order'
import OrderItem from './components/order-item'
import OrderCancel from './components/order-cancel' // 引入待支付时取消订单原因组件
import OrderLogistics from './components/order-logistics' // 订单物流弹框
export default {
  name: 'MemberOrder',
  components: { OrderItem, OrderCancel, OrderLogistics },
  props: {},
  setup () {
    // 默认激活
    const activeName = ref('all')

    // 筛选条件
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    const orderList = ref([])
    const loading = ref(false)
    const total = ref(0)

    // 获取订单列表
    const getOrderList = () => {
      loading.value = true
      findOrderList(reqParams).then(data => {
        console.log(data)
        orderList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }

    // 筛选条件变化重新加载，watch写在需要调用的函数后面
    watch(
      reqParams,
      () => {
        getOrderList()
      },
      { immediate: true }
    )

    // 点击切换选项卡
    const handleClick = ({ index }) => {
      console.log(index)
      reqParams.page = 1
      reqParams.orderState = index // 订单状态===index
    }

    // 删除订单
    const handlerDelete = (order) => {
      ElMessageBox.confirm(
        '亲，您确认删除该订单吗？',
        // 'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteOrder(order.id).then(() => {
          ElMessage.success({ message: '删除成功' })
          getOrderList()// 更新当前列表
        })
      }).catch(() => { })
    }
    return {
      activeName,
      orderStatus, // 订单状态
      orderList,
      handleClick,
      loading,
      total,
      reqParams,
      handlerDelete,
      ...useCancel(),
      ...useConfirm(),
      ...useLogistics()
    }
  }
}

// 将该功能区块从setup中抽离
// 取消订单逻辑
export const useCancel = () => {
  // 组件实例
  const orderCancelCom = ref(null)
  // 点击取消
  const handlerCancel = (order) => {
    // 打开对话框
    orderCancelCom.value.open(order)
  }
  return { handlerCancel, orderCancelCom }
}

// 确认收货逻辑
export const useConfirm = () => {
  const handlerConfirm = (order) => {
    ElMessageBox.confirm(
      '亲，您确认收货吗？确认后货款将打给卖家。',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      confirmOrder(order.id).then(() => {
        ElMessage.success({ message: '确认收货成功' })
        // 待收货--->待评价
        order.orderState = 4
      })
    }).catch(() => {})
  }
  return { handlerConfirm }
}

// 查看物流逻辑
export const useLogistics = () => {
  const orderLogisticsCom = ref(null)
  const handlerLogistics = (order) => {
    orderLogisticsCom.value.open(order)
  }
  return { handlerLogistics, orderLogisticsCom }
}
</script>

<style scoped lang="less">
.member-order {
  height: 100%;
  background: #fff;
  // background: pink;
  :deep(.el-tabs__header) {
    margin: 0 10px 15px;
    height: 60px;
    line-height: 60px;
  }
}
.order-list {
  background: #fff;
  // background: pink;
  padding: 10px 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
